<template>
  <div class="creator-main-page">
    <Desktop v-if="isDesktop" @id="buildHead"></Desktop>
    <Mobile v-else @id="buildHead"></Mobile>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useCreatorStore } from '@/store/creator'
import { useHeadStore } from '@/store/head'
import asyncCompWithLoading from '@/utils/async-comp-with-loading'

const { toCreatorHead } = useHeadStore()

const Desktop = asyncCompWithLoading(() => import('./Desktop.vue'))
const Mobile = asyncCompWithLoading(() => import('./Mobile.vue'))

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

const { getCreator } = useCreatorStore()
async function buildHead(id) {
  const creator = await getCreator(id)
  const pageUrl = creator.share_url
  toCreatorHead({ pageUrl, creator })
}
</script>

<style lang="scss" scoped>
.creator-main-page {
  width: 100%;
  height: 100%;
}
</style>
